<template>
  <div>
    <!-- 搜索 Begin -->
    <div
      class="bg-[--el-color-primary-light-8] flex flex-justify-center flex-items-center flex-wrap p-x-50px p-y-30px m-b-10px border-1px border-solid border-[--el-border-color-light]"
    >
      <el-input
        v-model="searchParams.libraryName"
        placeholder="请输入知识库名称..."
        clearable
        class="w-80% h-38px text-13px <sm:w-100% <sm:m-b-6px"
        @keyup.enter.native="handleSearch()"
      >
      </el-input>
      <el-button
        class="uppercase tracking-1px w-20% <sm:w-100% h-38px rounded-0 text-#FFF bg-#000 hover:bg-#000 text-12px"
        @click="handleSearch"
      >
        Search
      </el-button>
    </div>
    <!-- 搜索 End -->

    <!-- 知识库列表 Begin -->
    <el-row :gutter="27">
      <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24" class="m-b-30px" v-for="item in libraryList" :key="item.libraryId" v-if="!libraryIsSkeleton">
        <div
          class="border-1px border-solid border-[--el-color-primary-light-7] p-20px rounded-15px hover:border-[--el-color-primary] transition-all transition-300 transition-ease"
          @click="handleMore(item.libraryId)"
        >
          <div class="w-100% h-197px <md:h-360px <sm:h-330px overflow-hidden m-b-15px rounded-15px">
            <el-image
              :src="item.picture"
              fit="cover"
              class="w-100% h-100% rounded-15px hover:transform-scale-105 transition-all duration-600 ease-in-out"
            >
              <template #error>
                <el-image :src="errorUrl" fit="contain" class="w-100% h-100% rounded-15px"></el-image>
              </template>
            </el-image>
          </div>
          <!-- 知识库名称 -->
          <el-tooltip :content="item.libraryName" :show-after="1500" placement="right">
            <div
              class="text-18px text-[--el-text-color-primary] font-700 tracking-1px m-b-15px line-clamp-1 gradient-title text-#222 dark:text-#D8D8D8 hover:text-#6E6E6E dark:hover:text-#FFF"
            >
              {{ item.libraryName }}
            </div>
          </el-tooltip>
          <!-- 知识库作者 AND 创建时间 -->
          <div
            class="text-center m-t-3px m-b-10px flex flex-row flex-justify-start flex-items-center line-clamp-1"
            style="font-family: 'Muli', sans-serif"
          >
            <div class="border-1px border-solid border-[--el-color-primary] w-54px h-54px p-1px rounded-full m-r-8px flex flex-justify-center flex-items-center">
              <el-image :src="avatarUrl" fit="cover" class="w-50px h-50px hover:opacity-70 rounded-full">
                <template #error>
                  <el-image :src="errorUrl" fit="contain" class="w-50px h-50px"></el-image>
                </template>
              </el-image>
            </div>
            <div class="text-14px font-600 text-#52565B dark:text-#D8D8D8 line-height-13px">
              {{ item.createBy }}
            </div>
            <div class="text-[--el-color-primary] text-12px m-x-3px font-bold">﹣</div>
            <div class="text-13px text-#52565B dark:text-#D8D8D8">{{ item.createTime }}</div>
          </div>
          <!-- 知识库描述 -->
          <div class="text-#7E7E7E dark:text-#D8D8D8 text-14px h-46px line-clamp-2">
            {{ item.remark }}
          </div>
          <!-- 阅读更多 -->
          <div
            class="text-12px hover:text-[--el-color-primary] text-#1D1D1D dark:text-#D8D8D8 uppercase tracking-1px font-600 m-t-15px inline-block border-b-solid border-b-1px border-b-[--el-color-primary]"       
          >
            READ MORE
          </div>
        </div>
      </el-col>
      <!-- 骨架屏 Begin -->
      <div class="w-100%" v-else>
        <el-skeleton animated>
          <template #template>
            <div class="flex flex-wrap flex-justify-center">
              <div class="p-x-15px w-50% flex flex-col flex-justify-between m-b-15px" v-for="(_item, index) in 12" :key="index">
                <el-skeleton-item variant="image" class="w-100% h-256px <md:h-360px m-r-10px m-b-15px" />
                <el-skeleton-item class="w-120px h-26px m-b-15px" />
                <div class="flex flex-row flex-items-center m-b-10px">
                  <el-skeleton-item variant="image" class="rounded-full w-30px h-30px m-r-10px" />
                  <el-skeleton-item class="w-200px h-20px" />
                </div>
                <el-skeleton-item class="w-100% h-50px m-b-16px" />
                <el-skeleton-item class="w-120px h-26px m-b-16px" />
              </div>  
            </div>    
          </template>
        </el-skeleton>  
      </div>
      <!-- 骨架屏 End --> 
      <!-- 知识库数据为 0 -->
      <div class="w-100% flex flex-justify-center" v-if="libraryList.length == 0 && !libraryIsSkeleton">
        <el-empty :image="errorUrl" :image-size="300" description="主人，没有数据了哟👻"></el-empty>
      </div>
    </el-row>
    <div class="flex flex-justify-center m-t-10px">
      <!-- 分页 -->
      <el-pagination
        background
        :pager-count="5"
        v-model:current-page="searchParams.pageNo"
        v-model:page-size="searchParams.pageSize"
        v-show="total > 0"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleListPage"
        @current-change="handleListPage"
      />
    </div>
    <!-- 知识库列表 End -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import errorUrl from "@/assets/images/error/404.png";
import { koiMsgError } from "@/utils/koi.ts";
import { listPage } from "@/api/blog/library/index.ts";

const avatarUrl = "https://pic3.zhimg.com/80/v2-cb928dab1abe5231fb87db69498de128_720w.webp";

/** 查询参数 */
const searchParams = ref<any>({
  libraryName: "", // 文章标题
  libraryType: "",
  pageNo: 1, // 第几页
  pageSize: 10 // 每页显示多少条
});

const total = ref(100); 

const libraryList = ref<any>([]);

/** 搜索 */
const handleSearch = () => {
  console.log("搜索");
  searchParams.value.pageNo = 1;
  handleListPage();
};

onMounted(() => {
  handleListPage();
});

// 骨架屏是否显示[默认关闭]
const libraryIsSkeleton = ref(false);

/** 数据表格 */
const handleListPage = async () => {
  try {
    libraryIsSkeleton.value = true;
    libraryList.value = []; // 重置表格数据
    const res: any = await listPage(searchParams.value);
    libraryList.value = res.data.records;
    total.value = res.data.total;
    libraryIsSkeleton.value = false;
  } catch (error) {
    console.log(error);
    koiMsgError("数据查询失败，请刷新重试🌻");
  }
};

/** 跳转链接 */
const handleMore = (libraryId: any) => {
  window.open("/library/preview/" + libraryId, "_blank");
};
</script>

<style scoped></style>
